<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,user-scalable=0"/>
    <meta charset="UTF-8">
    <title>评价</title>
    <script src="__api__/js/fontSize.js"></script>
    <link rel="stylesheet" href="__api__/css/bootstrap.min.css">
    <link rel="stylesheet" href="__api__/css/reset.css">
    <link rel="stylesheet" href="__api__/css/my_main.css">
   
   
    <style>
        body{
            background: #ebebeb;
        }
    </style>
</head>

<body>
<div class="evaluate">

        <div class="evaluate_box1">
            <div class="container">
            <div class="row">
            <input type="hidden" value="{$res.riqi}" id="t1">
            <input type="hidden" value="{$res.appoint_time}" id='t2'>
                <div class="col-xs-3 col-md-3" style="width: 24%;">
                    <img src="__api__{$res.info['img']}">
                </div>
                <div class="col-xs-6 col-md-6" style="width: 49%;padding-left: 0;">
                    <div class="evaluate_text">
                        <h3>{$res.info['designation']}</h3>
                        <p>预约{$res.appoint_time}场地位{$res.count}个已结束</p>
                    </div>
                </div>
                <div class="col-xs-3 col-md-3" style="width: 27%">
                    <button class="again">
                        <a href="{:url('api/Venue/VenueDetails')}?id={$res.info['id']}" style="color:#ff8903"><span>再次预约</span></a>
                    </button>
                </div>
            </div>
            </div>
        </div>

        <div class="evaluate_box2">
            <div class="container">
            <div class="BOX">

                <!--<div id="startone"  class="block clearfix" >-->
                    <!--<p>总体评分：</p>-->
                    <!--<div id="starttwo" class="block clearfix">-->
                        <!--<div  class="star_score"></div>-->

                    <!--</div>-->
                    <!--<div class="attitude" style="text-align: center;margin-top: 0.35rem;"></div>-->
                <!--</div>-->
                <div id="star" class="">
                    <span>总体评价：</span>
                    <ul class="star_UL" sid="0">
                        <li><a href="javascript:;">1</a></li>
                        <li><a href="javascript:;">2</a></li>
                        <li><a href="javascript:;">3</a></li>
                        <li><a href="javascript:;">4</a></li>
                        <li><a href="javascript:;">5</a></li>
                    </ul>
                    <span  class="star_result_span">
                     <strong id='suj' class=""></strong>
			       <a></a>
			      
		</span>
                </div>
            </div>
           
            <div class="add_text">
                <div class="text">
                    <p>评价：</p>
                    <textarea id="description" class="form-control"  placeholder="说说你的体验吧" name="content">

                    </textarea>
                </div>


            </div>
            </div>
        </div>


    <div class="evaluate_box3">
        <div class="container">
            <button class="btn btn-primary" id='sub'>发表</button>
        </div>
    </div>
</div>




<script src="__api__/js/jquery-3.2.1.min.js"></script>
<script src="__api__/js/evaluate.js"></script>
<script src="__api__/js/jquery-weui.min.js"></script>
<script src="__assets__/layui.js"></script>
<script type="text/javascript">
$(function(){
	//var index2='ss';
	var aMsg = [
		"很不满意|（很差）",
		"不满意|（不满意!）",
		"一般|（一般）",
		"满意|（非常棒，值得向所有人推荐）",
		"非常满意|（非常满意!）"
	];
	
	var arrStars = $('.BOX > div');//  几组星星
	
	for(var k = 0; k < $('.BOX > div').length; k++){
		arrStars[k].className = 'star0'+k;
		var star_arrLi = $('.star0'+[k] +'> .star_UL > li');//  几个星星
		var star_strong = $('.star0'+[k] +'> .star_result_span > strong');//星星后面的分数
		var star_a = $('.star0'+[k] +' > .star_result_span a');//星星后面的满意的程度
		
		fun(star_arrLi, star_strong ,star_a);
	}
	
	function fun(arrLi,strong ,strong_a ){
		for (var i =0; i<arrLi.length; i++) {
			arrLi[i].index = i+1;
			arrLi[i].onmouseover = function(){
				//显现值几个星星
				ShowTars(this.index);
				//index2=this.index;
				strong.text(this.index + '分');// 星星后面的分数
				strong.attr({class:this.index});
				strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
			};
			
			//鼠标离开后恢复到上次显现的几个星星
			arrLi[i].onmouseout = function() {
				var sidNum = $(this).parents('ul').attr('sid');
				
				if(sidNum == 0){
					strong.text("");// 星星后面的分数
					strong_a.text("");//星星后面的满意的程度
				}else{
					strong.text(sidNum + '分');// 星星后面的分数
					strong_a.text(aMsg[sidNum - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
				}
				ShowTars(sidNum);// 显现值几个星星
			};
			
			//点击后进行评分处理
			arrLi[i].onclick = function() {
				strong.text(this.index + '分');// 星星后面的分数
				strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
				$(this).parents('ul').attr('sid',this.index);
			};
		}
		
		
		// 显现值几个星星
		function ShowTars(num) {
			for(var i = 0; i < arrLi.length; i++) 
				arrLi[i].className = i < num ? "on" : "";
		};
		
		//return this.index;
	};
	//console.log(index);
var layer;
layui.use('layer', function(){
	   layer = layui.layer;
	  
	  //layer.msg('hello');
	});    
 $('#sub').click(function(){
	var index=$('#suj').attr("class");
	var content=$('#description').val();
	//console.log(index);
	//console.log(content);
	var url="{url('api/Myevaluation/create')}";
	var place_id={$res.info['id']};
	var riqi=$('#t1').val();
	var appoint_time=$('#t2').val();
	var data={content:content,grade:index,place_id:place_id,appoint_time:appoint_time,riqi:riqi};
	$.post(url,data,function(res){
		var obj=eval('(' +res +')');
		var status=obj.status;
		var url=obj.data;
		var info=obj.info;
		if(status==1){
			layer.msg('评价成功',{icon:6},function(){
				window.location.href=url;
			});
			//window.location.href=url;
		}else{
			layer.msg('评价失败',{icon:5});
		}
	})
 })
});





</script>
</body>
</html>